<template>
  <div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
    >
      <span slot="baseinfo" slot-scope="text, record">
        <img style="width: 45px; heigth: 45px;border-radius:5px;margin-right:10px" :src="record.avatar_url" />
        <ellipsis :length="20" tooltip>{{ record.nickname }} </ellipsis>
      </span>
      <span slot="saas_clerk" slot-scope="text">
        <a-tag v-if="text == '0'">否</a-tag>
        <a-tag color="blue" v-else>是</a-tag>
      </span>
      <span slot="platform" slot-scope="text">
        <ellipsis v-show="text == '0'" :length="4" tooltip>微信</ellipsis>
        <ellipsis v-show="text == '1'" :length="4" tooltip>支付宝</ellipsis>
        <ellipsis v-show="text == '3'" :length="4" tooltip>手机</ellipsis>
      </span>
      <span slot="time" slot-scope="text, record">
        <span>{{ record.created_at | timeFormat }}</span>
      </span>
    </s-table>
  </div>
</template>

<script>
import SelectUser from '@/components/SelectUser/SelectUser'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import pick from 'lodash.pick'
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import { getUserList } from '@/api/user'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '用户信息',
    dataIndex: 'nickname',
    scopedSlots: { customRender: 'baseinfo' },
    width: 200
  },
  {
    title: '会员等级',
    dataIndex: 'l_name'
  },
  {
    title: '手机号',
    dataIndex: 'binding'
  },
  {
    title: '核销员',
    dataIndex: 'is_saas_clerk',
    scopedSlots: { customRender: 'saas_clerk' }
  },
  {
    title: '余额',
    dataIndex: 'money'
  },
  {
    title: '积分',
    dataIndex: 'integral'
  },
  {
    title: '加入时间',
    dataIndex: 'created_at',
    scopedSlots: { customRender: 'time' }
  }
]

export default {
  name: 'UserList',
  components: {
    STable,
    Ellipsis,
    SelectUser
  },
  props: {
    queryParam: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    this.columns = columns
    return {
      defaultUser: null,
      parent_id: null,
      userInfo: [],
      selectDate: null,
      locale: zhCN,
      ranges: {
        一月内: () => [moment().startOf('day').subtract(1, 'month'), moment()],
        昨天: () => [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],
        最近一周: () => [moment().startOf('day').subtract(1, 'weeks'), moment()],
      },
      dateFormat: 'YYYY-MM-DD',
      user_id: 0,
      moneyExplain: '',
      // 会员列表
      roleList: [],
      // 选择的会员
      selectedLevel: [],
      integralRechargevalue: 0,
      moneyRechargevalue: 0,
      // create model
      visible: false,
      activeKey: '1',
      rechargeVisible: false,
      confirmLoading: false,
      modalLoading: false,
      rechargeModalLoading: false,
      blacklistValue: '0',
      is_saas_clerk: '0',
      rechargeTypeValue: '1',
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      records: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        Object.assign(parameter, this.queryParam)
        console.log('loadData request parameters:', parameter)
        return getUserList(parameter).then((res) => {
          this.roleList = res.data.level
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  filters: {},
  created () {},
  computed: {
  },
  methods: {
    moment
  }
}
</script>
